<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <div class="row">
            <div class="space-6"></div>
            <div id="main1" class="col-sm-4" style="height:400px">
                <table class="table table-striped table-bordered table-hover">
                    <thead id="thead">
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>
            <div id="main2" class="col-sm-8" style="height:400px"></div>
            <div class="space-6"></div>
            <div id="main" class="col-sm-6" style="height:400px"></div>
        </div><!-- /row -->
        <div class="hr hr32 hr-dotted"></div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<script src="${ctx}/assets/js/echarts/echarts.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var td_l = '<td><div contenteditable="true">';
        var td_r = '</div></td>';

        var result = $.parseJSON('${result}');
        var row = result.rowData;
        var column = result.columnData;
        var data = result.data;
        var thead = "<tr><td></td>";
        for (var i = 0; i < row.length; i++) {
            thead += "<td>" + row[i] + "</td>";
        }
        thead += "</tr>";
        $("#thead").append(thead);
        var tbody = "";
        for (var i = 0; i < column.length; i++) {
            tbody += "<tr><td>" + column[i] + "</td>";
            for (var j = 0; j < row.length; j++) {
                tbody += td_l + data[j][i] + td_r;
            }
            tbody += "</tr>";
        }
        $("#tbody").append(tbody);
    });

    function generateChart(row, column, data) {
        require.config({
            paths : {
                echarts : '${ctx}/assets/js/echarts'
            }
        });
        require([ 'echarts', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ], function(ec) {
            var myChart = ec.init(document.getElementById('main2'));
            var option = {
                title : {
                    text: '费用统计'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data: row
                },
                toolbox: {
                    show : false
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : column
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ],
                series : [
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10]
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0]
                    }
                ]
            };
            myChart.setOption(option);
        });
    }
</script>
</body>
</html>
